<template>
<tc-card>
  <div class="swiper-container poll-card-container" :id="id">
    <div :class="slidesPerView >= list.length ? 'poll-card-wrapper' :'swiper-wrapper'">
      <tc-flex :class="slidesPerView >= list.length ? 'poll-card-slide' :'swiper-slide'" v-for="(item, index) of list" :key="index">
        <tc-flex direction="column" class="poll-container">
          <span class="name">{{ item.name }}</span>
          <span class="title" :style="{ color: item.color }">{{ item.title }}</span>
          <span class="value" :style="{ color: item.color }">{{ item.value }}</span>
        </tc-flex>
        <!-- <div v-if="index != (list.length - 1)" class="separation" ></div> -->
      </tc-flex>
    </div>
    <div class="poll-pagination"></div>
  </div>
</tc-card>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcCard from '@/controls/TcCard.vue'
  import Swiper from 'swiper'
  import jQuery from 'jquery'

  @Component({
    components: {
      TcCard
    }
  })
  export default class TcPollCard extends Vue{
    @Prop({ required: true })
    id: string

    @Prop()
    list: any[]

    @Prop()
    pagination

    swiper = null
    slidesPerView = 3

    mounted() {
      const width = jQuery(window).width()
      this.slidesPerView = width >= 480 ? 4 : 3
      if (this.slidesPerView < this.list.length) {
        this.swiper = new Swiper('#' + this.id, {
          slidesPerView: this.slidesPerView,
          spaceBetween: 1,
          // loop: true,
          loopedSlides: this.slidesPerView,
          roundLengths: true,
          pagination: {
            el: '.poll-pagination',
            clickable: true,
          }
        })
      }
    }
  }
</script>

<style lang="less">
@import (reference) "~@/less/resources.less";
.theme(@background-color, @active-color){
  .poll-card-container{
    background: #fff;
    .swiper-pagination-bullet,
    .swiper-pagination-bullet-active{
      width: @bullet-size;
      height: @bullet-size;
      border-radius: @bullet-size;
      background: @background-color;
      -webkit-appearance:none;
    }

    .swiper-pagination-bullet-active{
      background: @active-color;
    }
  }
}
.theme-default{
  .theme(@default-tc-poll-card-pagination-color, @default-tc-poll-card-pagination-active-color)
}
.theme-dark{
  .theme(@dark-tc-poll-card-pagination-color, @dark-tc-poll-card-pagination-active-color)
}
</style>


<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @pagination-color){
  .poll-card-container{
    margin-top: @separation;
    // background: @background-color;

    .swiper-wrapper {
      width: 100%;
      height: 100%;
      margin-left: -(@separation);
      position: relative;
    }
  }
  .poll-container{
    flex: 1;
    padding: 0 @separation;

    @media (max-width: 480px) {  
      .name{
        font-size: @tc-poll-card-name-font-size;
      }

      .title{
        font-size: @tc-poll-card-title-font-size;
        font-weight: 500;
      }

      .value{
        font-size: @tc-poll-card-value-font-size;
      }
    }  
    @media (min-width: 480px) {  
      .name{
        font-size: @tc-poll-card-flat-name-font-size;
      }

      .title{
        font-size: @tc-poll-card-flat-title-font-size;
        font-weight: 500;
      }

      .value{
        font-size: @tc-poll-card-flat-value-font-size;
      }
    }
  }
  .poll-container,
  .poll-pagination{
    background: @pagination-color;
  }
  .poll-card-container,
  .poll-pagination{
    border-radius: 0 0 @border-radius @border-radius;
  }

  .poll-card-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;

    .poll-card-slide{
      flex: 1;
      margin-bottom: @separation;
    }
  }
}
.theme-default{
  .theme(@default-tc-poll-card-separation-color, @default-tc-poll-card-background-color)
}
.theme-dark{
  .theme(@dark-tc-poll-card-separation-color, @dark-tc-poll-card-background-color)
}
</style>
